<template>
  <section class="relative w-full flex flex-col justify-center items-center">
    <div class="center text-4xl">好好学习，从做翻译开始</div>
    <article class="article-chinese">
      <p class="translate-y-16">苦心人、天不负,卧薪尝胆,三千越甲可吞吴。</p>
      <p>有志者、事竟成,破釜沉舟,百二秦关终属楚;</p>
    </article>
    <!-- <article class="article-english">
      <p>
        Where there is a will there is a way,break the caldrons and sink the
        boats,hundreds of Qing's belong to Chu eventually;
      </p>
      <p>
        God never ingore hardworking man,tolerance the worst for future
        rise,Three thousand of Yue Army could conquer Wu.
      </p>
    </article> -->
  </section>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.center {
  font-family: cursive;
  text-shadow: 0px 2px 2px #333;
  color: deeppink;
}

.article-chinese {
  @apply absolute top-10 right-10 flex gap-x-4 text-2xl font-bold;

  p {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: cursive;
    text-shadow: 1px 1px 1px #333;
  }
}

// .article-english {
//   @apply text-2xl font-bold;

//   p {
//     // writing-mode: vertical-rl;
//     // text-orientation: upright;
//     font-family: cursive;
//     text-shadow: 1px 1px 1px #333;
//   }
// }
</style>
